<script setup lang="ts">
import { Button, StyleProvider } from 'ant-design-vue'
import {
  messageApi,
  messageContextHolder,
  modalApi,
  modalContextHolder,
  notificationApi,
  notificationContextHolder,
  styleProviderProps,
} from './utils/utils'
import TestCom from './components/testCom.vue'

const confirm = () => {
  modalApi.confirm({
    title: 'Confirm',
  })
}

const msg = () => {
  messageApi.info('This is a message')
}
const notify = () => {
  notificationApi.info({
    message: 'Notification Title',
    description: 'This is the content of the notification.',
  })
}
</script>

<template>
  <StyleProvider v-bind="styleProviderProps">
    <modalContextHolder></modalContextHolder>
    <messageContextHolder></messageContextHolder>
    <notificationContextHolder></notificationContextHolder>
    <!-- ant-design-vue低版本兼容测试 -->
    <Button @click="confirm">Confirm</Button>
    <Button @click="msg">Message</Button>
    <Button @click="notify">Notification</Button>
    <TestCom></TestCom>
    <!-- 测试区域结束 -->
  </StyleProvider>
</template>
